<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <script src="./lib/vue.js"></script>
        <title>10 vue父子组件传值</title>
    </head>
    <body>
        <div id="box">
            <!-- 
                注意：
                1、props参数有驼峰命名时，HTML标签属性应用-隔开表示；
                2、传参是一个变量时要用动态绑定:xx形式；
             -->
            <navbar my-text="首页" :is-show="false"></navbar>
            <navbar my-text="列表" :is-show="true"></navbar>
            <navbar :my-text="parantName" :is-show="true"></navbar>

            <br />
            <hr />
            <br />

            <child @myevent="handleMyEvent($event)" :param="parantChildParam"></child>
            {{ parantChildParam }}
        </div>

        <script>
            //子组件中接收父组件传参
            Vue.component('navbar', {
                template: `<div>
                    <button v-show="isShow">back</button>
                    navbar--{{myText}}
                    <button v-show="isShow">home</button>
                </div>`,
                // props: ['myText'] //接收父组件的参数名称，缺点数组无法表示参数类型
                props: {
                    //属性验证
                    myText: String,
                    isShow: Boolean
                }
            });

            //子组件中传参给父组件
            Vue.component('child', {
                template: `<div>
                    这是子组件：{{ param }}<br/>
                    <button @click="handleClick()">发送参数到父组件</button>
                </div>`,
                data() {
                    return {
                        childParam: '我是从子组件传过来的参数'
                    };
                },
                methods: {
                    handleClick() {
                        this.$emit('myevent', this.childParam);
                    }
                },
                props: {
                    param: String
                }
            });

            const vm = new Vue({
                el: '#box',
                data() {
                    return {
                        parantName: '父组件box',
                        parantChildParam: ''
                    };
                },
                methods: {
                    handleMyEvent(event) {
                        this.parantChildParam = event;
                    }
                }
            });
        </script>
    </body>
</html>
